<template>
  <div class="flow-info-setting-dialog">
    <el-form :model="FlowInfo" size="small" label-width="auto" style="max-width: 600px">
      <el-form-item label="ID">
        <el-input v-model="FlowInfo.id" disabled/>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="FlowInfo.Title"/>
      </el-form-item>
      <el-form-item label="启用轮询">
        <el-switch v-model="FlowInfo.EnableCycle"/>
      </el-form-item>
      <el-form-item label="轮询时间" v-if="FlowInfo.EnableCycle">
        <el-input v-model="FlowInfo.CycleTime" type="number">
          <template #append>ms</template>
        </el-input>
      </el-form-item>
      <el-form-item label="超时时间">
        <el-input v-model="FlowInfo.OutTime" type="number">
          <template #append>ms</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="SaveFlowInfoBtn">保存</el-button>
        <el-button @click="CloseBtn">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import {useFlowStore} from "@/store/modules/flow/flowStore";
import {watch, ref} from "vue";
import {FlowInfoType, MessageSuccess} from "@/utils";
//@ts-ignore
import FlowRuntimeApi from "@/api/flow/FlowRuntimeApi.js";

const FlowStore = useFlowStore()
const FlowInfo = ref<FlowInfoType>(
    {
      id: 0,
      Title: '',
      CycleTime: 0,
      EnableCycle: false,
      OutTime: 10000
    })
const Emits = defineEmits(['close'])
const SaveFlowInfoBtn = () => {
  new FlowRuntimeApi().UpdateFlowInfo(FlowInfo.value, () => {
    MessageSuccess('保存成功！')
    CloseBtn()
  })
}

const CloseBtn = () => {
  Emits('close')
}

const _Show = (FlowId: number) => {
  FlowInfo.value = FlowStore.AllFlow.filter((f: FlowInfoType) => f.id === FlowId)[0]
}

defineExpose({_Show})
</script>

<style scoped lang="scss">
.flow-info-setting-dialog {
  user-select: none;
}
</style>
